<template>
  <div :id="id" ref="boxwrap" :class="className" :style="{height:height,width:width}" :title="title" :data="data" />
</template>

<script>
import resize from '@/components/Charts/mixins/resize'
import { parseTime } from '@/utils'
export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    id: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '200px'
    },
    height: {
      type: String,
      default: '200px'
    },
    title: {
      type: String,
      default: ''
    },
    data: {
      type: Array,
      default: () => { return [] }
    }
  },
  data() {
    return {
      chart: null,
      fontColor: '#bebebe',
      color: ['#00df5f', 'gray'],
      typeObj: {
        1: { label: '生产', color: 'green' },
        2: { label: '停机', color: 'gray' },
        3: { label: '保养', color: 'yellow' },
        4: { label: '异常', color: 'red' }
      },
      minMaxObj: {
        min: '',
        max: ''
      }
    }
  },
  watch: {
    data: {
      immediate: true,
      handler: function(newval, oldval) {
        this.data = newval
        if (this.chart) {
          this.chart.dispose()
          this.chart = null
          this.initChart()
        }
      },
      deep: true
    }
  },
  mounted() {
    this.domResize()
    this.initChart()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    minMax() {
      const now = new Date()
      const oneDay = 1000 * 60 * 60 * 24
      if (now.getHours() < 8) { // 小时（0~23） 早上8点之前 ：昨天8点~今天8点
        this.minMaxObj = {
          min: parseTime(new Date().getTime() - oneDay, '{y}-{m}-{d}') + ' 08:00',
          max: parseTime(new Date(), '{y}-{m}-{d}') + ' 08:00'
        }
      } else {
        this.minMaxObj = {
          min: parseTime(new Date(), '{y}-{m}-{d}') + ' 08:00',
          max: parseTime(new Date().getTime() + oneDay, '{y}-{m}-{d}') + ' 08:00'
        }
      }
    },
    initChart() {
      this.minMax()
      // type  1生产（绿色） 2停机（灰色） 3保养（黄色） 4异常（红色）
      const legend = []
      for (const k in this.typeObj) {
        legend.push({ name: this.typeObj[k].label, type: 'bar', data: [] })
      }
      const seriesData = []
      this.data.forEach(item => {
        seriesData.push({
          itemStyle: {
            color: this.typeObj[item[2]].color
          },
          name: '运行状态',
          value: [0, item[0], item[1], item[2]] // 第一位0代表y轴的索引，后两位代表开始结束时间，最后一位表示状态
        })
      })
      this.chart = this.$echarts.init(document.getElementById(this.id))
      this.chart.setOption({
        color: this.color,
        tooltip: {
          formatter: params => {
            return params.value[1].split(' ')[1] + '~' + params.value[2].split(' ')[1] + '<br/>' + this.typeObj[params.value[3]].label
          }
        },
        grid: {
          top: 0,
          left: '4%',
          right: '4%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'time',
          scale: true,
          // interval: 3600  * 1000,   //以一个小时递增
          min: this.minMaxObj.min, // 将data里最小时间的整点时间设为min,否则min会以data里面的min为开始进行整点递增
          max: this.minMaxObj.max,
          axisLabel: {
            color: this.fontColor,
            margin: 5,
            fontSize: 14,
            formatter: function(value) {
              var date = new Date(value)
              return date.getHours() + ':00'
            }
          }
        },
        yAxis: {
          data: ['产线名'],
          axisLabel: {
            show: false
          },
          axisLine: {
            show: false
          }
        },
        series: [
          ...legend, // 用空bar来显示图例
          {
            type: 'custom',
            renderItem: function(params, api) { // 开发者自定义的图形元素渲染逻辑，是通过书写 renderItem 函数实现的
              var categoryIndex = api.value(0)// 这里使用 api.value(0) 取出当前 dataItem 中第一个维度的数值。
              var start = api.coord([api.value(1), categoryIndex]) // 这里使用 api.coord(...) 将数值在当前坐标系中转换成为屏幕上的点的像素值。
              var end = api.coord([api.value(2), categoryIndex])
              var height = api.size([0, 1])[1] * 0.9
              var rectShape = this.$echarts.graphic.clipRectByRect({ // 矩形的位置和大小。
                x: start[0],
                y: start[1] - height / 2,
                width: end[0] - start[0],
                height: height
              }, { // 当前坐标系的包围盒。
                x: params.coordSys.x,
                y: params.coordSys.y,
                width: params.coordSys.width,
                height: params.coordSys.height
              })
              return rectShape && {
                type: 'rect', // 表示这个图形元素是矩形。还可以是 'circle', 'sector', 'polygon' 等等。
                shape: rectShape,
                style: api.style()
              }
            },
            encode: {
              x: [1, 2], // data 中『维度1』和『维度2』对应到 X 轴
              y: 0// data 中『维度0』对应到 Y 轴
            },
            data: seriesData
          }
        ]
      })
    },
    domResize() {
      const that = this
      const dom = this.$refs.boxwrap
      this.$erd.listenTo(dom, function(element) {
        that.chart.resize()
      })
    }
  }
}
</script>
